<template>
	
	<view class="ppt">
		<view style="height: 20px; width: 750rpx;  background-color:#fff; border: none;"></view>
		<my-title :title="'ppt'" @back="back" :buttonflag="false"></my-title>
		<image :src="defaultUrl + defaultImgUrl" mode="scaleToFill" ></image>
		<button @click="last" :disabled="activeNum === 0" size="mini">上一页</button>
		<button :disabled="activeNum+1 === chapterImgs.length" size="mini" @click="next" style="float: right;">下一页</button>
		<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
		   <p @tap="ToPage">点击播放视频</p>              
		 </navigator>
	</view>
</template>

<script>
	import myTitle from '../../components/title.vue'
	export default {
		name:"ppt",
		data() {
			return {
				token: '',
				cid: '',
				activeNum:0,
				chapterImgs: [],
				title: '',
				defaultUrl: 'http://exam.tutestudio.net/sys/DownloadFile?id=',
				defaultImgUrl: ''
			};
		},
		components: {myTitle},
		methods:{
			ToPage() {
				uni.navigateTo({
					url: '/pages/training/video?id='+this.chapterImgs[this.activeNum].videoUrl
				})
			},
			next () {
					this.activeNum ++
					this.defaultImgUrl = this.chapterImgs[this.activeNum].imgUrl
			},
			last () {
				this.activeNum --
				this.defaultImgUrl = this.chapterImgs[this.activeNum].imgUrl
			},
			back () {
				uni.navigateTo({
					url: '/pages/training/training?title='+this.title
				})
			},
			getChapterImgs () {
				uni.request({
					url: 'http://exam.tutestudio.net/api/student/chapterImgs?cid=' + this.cid,
					method: 'GET',
					header: {
						token: this.token
					},
					success: (res) => {
						if (res.data.statusCode !== 200) {
							uni.showToast({
								title: res.data.errors,
								icon: 'none'
							})
						}
						this.chapterImgs = res.data.data
						this.defaultImgUrl = this.chapterImgs[this.activeNum].imgUrl
					},
					fail(err) {
						uni.showToast({
							title: '接口参数有误！',
							icon: 'none'
						})
					}
				})
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
				this.cid = option.cid
				this.title = option.tit;
				this.token = uni.getStorageSync('token')
				if (!this.token) {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					})
					return;
				}
				this.getChapterImgs()	
		}
		
	}
</script>

<style lang="scss" scoped>
	.ppt{

		background-color: #333333;
		height: 100vh;
		
		image{
			width: 100%;
			 height: 200px; 
			 padding-top: 50%;
		}
		button{
			margin: 3px 15px;
		}
		p{
			font-size: 13px;
			text-align: center;
			color: #66ccff;
		}
	}
	uni-page-body, uni-page-refresh{ height: 100%; }
</style>
